import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import { Route, withRouter } from 'react-router-dom';
import { List } from 'weaver-mobile';
import { RouteLayout } from 'weaver-mobile-page';

import { TitleUtil } from '../../util';
import Api from '../../apis/setting';

import MailAccount from './mailAccount';
import MailSign from './mailSign';
import MailTemplate from './mailTemplate';
import LabelManage from './labelManage';
import FolderManage from './folderManage';

const Coms = [MailAccount, MailSign, MailTemplate, LabelManage, FolderManage];

const RouterList = ['mailAccount', 'mailSign', 'mailTemplate', 'labelManage', 'folderManage'];
const RouterRoot = '/setting/';

@inject('settingStore')
@withRouter
@observer
export default class Setting extends Component {
  constructor(props) {
    super(props)
    this.state = {
      pagetitle: ''
    }
  }
  
  componentDidMount() {
    const { settingStore } = this.props;
    const { settingItems } = settingStore;
    if (!settingItems.length) {
      Api.getMailSetTabs().then((res) => {
        const { grouptinfo, pagetitle, status } = res;
        if (Number(status)) {
          settingStore.setState({
            settingItems: grouptinfo.filter(i => RouterList.indexOf(i.groupid) !== -1) || settingItems,
            name: pagetitle || 'setting',
           });
          TitleUtil.setTitle(pagetitle || 'setting');
          this.setState({ pagetitle })
        }
      });
    }
  }

  componentWillReceiveProps(nextProps) {
    const { location: { pathname }, match } = nextProps;
    let title = this.getTitle();
    switch (pathname) { // 为了方便管理，将设置中的二级页面Title统一放到这边管理切换
      case `${RouterRoot}mailAccount`:
        TitleUtil.setTitle(title);
        break;
      case `${RouterRoot}mailTemplate`:
        TitleUtil.setTitle(title);
        break;
      case `${RouterRoot}mailSign`:
        TitleUtil.setTitle(title);
        break;
      case `${RouterRoot}labelManage`:
        TitleUtil.setTitle(title);
        break;
      case `${RouterRoot}folderManage`:
        TitleUtil.setTitle(title);
        break;
      case match && match.path: 
        TitleUtil.setTitle(this.state.pagetitle || 'setting');
        break;
      default:
    }
  }

  componentWillUnmount() {
    TitleUtil.resetEmElement();
  }

  getTitle = () => {
    const { settingStore: { settingItems, name } } = this.props;
    let title = name;
    if (settingItems.length) {
      const route = window.location.hash.substring(1);
      const index = settingItems.findIndex(r => route.indexOf(r.groupid) !== -1);
      if (index !== -1) { title = settingItems[index].title; }
    }
    return title;
  }

  render() {
    const { history, settingStore: { settingItems } } = this.props;
    return (
      <RouteLayout>
        <div className="email-setting-warpper wm-route-layout" key="email-setting">
          <List>
            {settingItems.map(item => <List.Item onClick={() => history.push(`${RouterRoot}${item.groupid}`)} key={item.groupid} arrow="horizontal">{item.title}</List.Item>)}
          </List>
          {Coms.map((Com, index) => (
            <Route
              key={RouterList[index]}
              path={`${RouterRoot}${RouterList[index]}`}
              render={() => (
                <RouteLayout>
                  <div key={RouterList[index]} className="wm-route-layout" >
                    <Com title={this.getTitle()} />
                  </div>
                </RouteLayout>
              )}
            />
          ))}
        </div>
      </RouteLayout>
    );
  }
}